<%@page pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"
	scope="session" />
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<jsp:include page="/layout/_css.jsp" />
<link rel="stylesheet"
	href="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.css">
</head>
<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight">
		<!-- <table id="table"></table> -->
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>菜系列表</h5>
					</div>
					<div class="ibox-content">
						<table id="table"></table>
						<div class="btn btn-primary" onclick='addFoodType()'>添加菜系</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="addfoodtype" style="display: none;">
		<div class="wrapper wrapper-content animated fadeInRight">
			<div class="ibox-content">
				<form action="" method="get" class="form-horizontal">
					<div class="form-group">
						<label class="col-sm-2 control-label">菜系名</label>

						<div class="col-sm-10">
							<input type="text" name="cai_type" class="form-control" value="">
						</div>
					</div>


					<div class="hr-line-dashed"></div>
					<div class="form-group">
						<div class="col-sm-4 col-sm-offset-2">
							<input class="btn btn-primary" type="button" onclick="addcaixi()"
								value="添加"> <input class="btn btn-white" type="button"
								onclick="laclose()" value="取消">
						</div>
					</div>
				</form>
			</div>
		</div>

	</div>
</body>
<jsp:include page="/layout/_script.jsp" />
<script
	src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.js"></script>
<script
	src="https://cdn.bootcss.com/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.js"></script>
<script>
	$('#table')
			.bootstrapTable(
					{
						url : '${ctx}/FoodTypeServlet/listFoodType',
						columns : [
								{
									field : 'foodTypeId',
									title : '菜系号',
									sortable : true
								},
								{
									field : 'typeName',
									title : '菜系名'
								},
								{
									field : 'caozuo',
									title : '操作',
									formatter : function(v1, v2, v3) {
										/* console.log(v1);
										console.log(v2);
										console.log(v3); */
										return [
												'<a class="remove" href="javascript:void(0)" title="Remove">',
												'<i class="glyphicon glyphicon-remove"></i>',
												'</a>' ].join('');
									},
									events : 'caocuoEvents'
								} ],
						pagination : true,
						pageSize : 10,
						pageList : [ 5, 10, 20 ],
						/* search : true, */
						showRefresh : true,
						showColumns : true,
						/* clickToSelect : true, */
						sidePagination : 'server',
						rowStyle : function(v, index) {
							var classes = [ 'active', 'success', 'info',
									'warning', 'danger' ];

							return {};
						}
					});
	window.caocuoEvents = {
		'click .like' : function(e, value, row) {
			alert(row['foodTypeId']);
		},
		'click .remove' : function(e, value, row) {
			if (confirm('是否删除')) {
				$.get('${ctx}/FoodTypeServlet/removeByIdJson', {
					'id' : row['foodTypeId']
				}, function(r) {
					if (r) {
						layer.msg('删除成功');
						$('#table').bootstrapTable('refresh');
					} else {
						layer.msg('删除失败');
					}
				});
			}
		}
	};

	 
	function addFoodType() {
		layer.open({
			type : 1,
			content : $('#addfoodtype'),
			area : [ '800px', '300px' ],
			offset : '70px',
			title : '菜系添加',
			fixed : true,
		});
	}
	function laclose() {
		layer.closeAll();
		$('#table').bootstrapTable('refresh');
	}
	function addcaixi() {
		$.ajax({
			url : '${ctx}/FoodTypeServlet/addFoodType',
			type : 'post',
			data : {
				"typeName" : $("[name=cai_type]").val()
			},
			success : function(r) {
				if (r) {
					layer.closeAll();
					layer.msg("添加成功");
					time: 5000;
					$('#table').bootstrapTable('refresh');
				} else {
					layer.msg("添加失败");
				}
			}
		});
	}
</script>
</html>